<template>
    <div class="stock-contianer">
        <div class="stock-tray-title">
            <p>{{ $route.query.name }}</p>
        </div>
        <van-list v-model="dataset.loading" :finished="dataset.finished" finished-text="还没有东东" @load="controllerRequestList">
            <ul class="stock-listing">
                <li v-for="(item, index) in dataset.items" :key="index" @click="eventClickOpenDetails(index)">
                    <p>{{ item.name }}</p>
                    <!-- <p>总重量：<span>{{ item.weight }}kg</span></p> -->
                    <p>总重量：<span>{{ item.number }}kg</span></p>
                </li>
            </ul>
        </van-list>
    </div>
</template>

<script>
    import {List} from 'vant';

    export default {
        name: "ReservoirManageStockTray",
        components: {
            [List.name]: List
        },
        data() {
            return {
                dataset: {
                    page: 0, limit: 30,
                    loading: false, finished: false,
                    items: [],token:''
                }
            }
        },
        mounted() {

        },
        methods: {
            controllerRequestList() {
                var url = '/api/admin/tray/getone',
                    params = {
                        token: this.$route.query.token,
                        // child: this.$route.query.child
                    },
                    order = window.sessionStorage.getItem('outOrder');

                if(order) params.orderid = order;

                this.$util.postRequestInterface(url, params, (res) => {
                    if(res.data.orderlist) {
                        this.dataset.items = res.data.orderlist;
                        this.dataset.token = res.data.token;
                    }
                    this.dataset.finished = true;
                    this.dataset.loading = false;
                })
            },
            eventClickOpenDetails(index) {
                var {  id, number } = this.dataset.items[index];

                this.$router.push({
                    path: '/reservoirManagement/stock-tray-details',
                    query: {
                        token:this.dataset.token, child: id, name: number
                    }
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .stock-tray-title {
        padding: 0.8rem 1.6rem;
        background-color: #F4F4F4;
        color: #999999;
    }

    .stock-listing {

        li {
            padding: 1.6rem;
            display: flex;
            font-size: 1.4rem;
            border-bottom: 0.4rem solid #F4F4F4;

            p {
                color: #999999;
            }
            
            p:first-child {
                flex: 1;
                color: #333333;
            }

            p:last-child {
                margin-left: 1rem;
            }

            p span {
                color: #00CC00;
            }
        }
    }
</style>